<template>
  <div>
    <el-table border stripe  fit element-loading-text="拼命加载中" highlight-current-row   v-loading.body="tableLoadingFlag" :data="data">
      <el-table-column
        v-if="multipleSelection"
        type="selection"
        width="50">
      </el-table-column>
      <template  v-for="column in columns">
        <el-table-column

          :width="column.width"
          :align="column.align"
          :label="column.label"
          :prop="column.name"
          :formatter="column.formatter"
          >
        </el-table-column>
</template>
      <el-table-column
        align="center"
        label="操作"
        fixed="right"
        :width="operationColumn.width"
        v-if="operationColumn">
        <template slot-scope="scope">
          <template v-for="operation in operationColumn.operations">
            <el-button size="small" type="text" @click="operation.callback(scope.row)">{{operation.name}}</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      class="pagination"
      v-if="pagination"
      :current-page="currentPage"
      :page-size="pagination.pageSize"
      :page-sizes="pageSizes"
      :total="pagination.totalRecords"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      >
    </el-pagination>

  </div>
</template>

<script>
  export default {
    name: 'CustomTable',
    props: {
      columns: {
        type: Array,
        require: true
      },
      data: {
        type: Array,
        require: true
      },
      tableLoadingFlag: {
        type: Boolean,
        default: false
      },
      multipleSelection: {
        type: Boolean,
        default: false
      },
      pagination: {
        type: Object,
        require: false
      },
      operationColumn: {
        type: Object,
        require: false
      },

      pageSizes: {
        type: Array,
        default () {
          return [2,10, 20, 30, 50, 100, 120, 200, 1000]
        }
      },
    },
     data () {
      return {
        totalCount: 0,
        pageSize: null,
        currentPage: 1
      }
    },
    methods: {
      handleSizeChange(val) {
        // 每页条数
        this.pagination.pageSize = val
        this.pagination.callback({
          pageNumber: this.pagination.currentPage,
          pageSize: val
        })
      },
      handleCurrentChange(val) {
        // 当前页
        this.pagination.currentPage = val
        this.pagination.callback({
          pageNumber: val,
          pageSize: this.pagination.pageSize
        })
      }
    }
  }
</script>

<style>
  .pagination {
    margin-top: 10px;
  }
</style>
